<template>
  <div class="box">
    <div ref="chartRef1" :style="{ height, width }"></div>
    <div ref="chartRef2" :style="{ height, width }"></div>
  </div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { getNumbers, getMoneyNumbers } from './helper/api';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const props = defineProps({
    ...basicProps,
    type: { type: String, default: '1' },
  });
  const chartRef1 = ref<HTMLDivElement | null>(null);
  const chartRef2 = ref<HTMLDivElement | null>(null);
  const { setOptions: setOptions1 } = useECharts(chartRef1 as Ref<HTMLDivElement>);
  const { setOptions: setOptions2 } = useECharts(chartRef2 as Ref<HTMLDivElement>);
  onMounted(() => {
    getList(props.type);
  });
  function getList(type) {
    getMoneyNumbers(type, '3').then(res => {
      if (res.code == 200) {
        const projectsNumber = res.data.dataList.map(item => item.projectsNumber);
        const money = res.data.dataList.map(item => item.money);
        const name = res.data.dataList.map(item => item.yname);
        setOptions1({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          title: {
            text: '项目数',
            left: 'center',
            top: 'top',
          },
          grid: { left: '1%', right: '1%', top: '20%', bottom: '10%', containLabel: true },
          xAxis: {
            type: 'category',
            // data: ['建设工程', '货物采购', '服务性采购', '不动产出租', '资产处置', '其他'],
            data: name,
            axisLabel: {
              rotate: 45, // 设置 X 轴文字倾斜角度
            },
          },
          yAxis: {
            type: 'value',
            max: 200,
            splitNumber: 8,
          },
          legend: {
            data: ['数量'], // 图例项名称
            orient: 'horizontal', // 图例布局方向
            left: 'right', // 图例位置
            bottom: '0%',
          },
          series: [{ name: '数量', data: projectsNumber, type: 'bar', barMaxWidth: 40 }],
          // series: [{ name: '数量', data: [5100, 6000, 3200, 4800, 3200, 4800], type: 'bar', barMaxWidth: 40 }],
        });
        setOptions2({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          title: {
            text: '项目金额(万元)',
            left: 'center',
            top: 'top',
          },
          grid: { left: '1%', right: '1%', top: '20%', bottom: '10%', containLabel: true },
          xAxis: {
            type: 'category',
            data: name,
            // data: ['建设工程', '货物采购', '服务性采购', '不动产出租', '资产处置', '其他'],
            axisLabel: {
              rotate: 45, // 设置 X 轴文字倾斜角度
            },
          },
          yAxis: {
            type: 'value',
            max: 10000,
            splitNumber: 8,
          },
          legend: {
            data: ['金额'], // 图例项名称
            orient: 'horizontal', // 图例布局方向
            left: 'right', // 图例位置
            bottom: '0%',
          },
          series: [{ name: '金额', data: money, type: 'bar', barMaxWidth: 40 }],
          // series: [{ name: '金额', data: [5100, 6000, 3200, 4800, 3200, 4800], type: 'bar', barMaxWidth: 40 }],
        });
      } else {
        createMessage.error(res.msg);
      }
    });
  }
</script>
<style lang="less" scoped>
  .box {
    display: flex;
    div {
      margin: 0 10px;
    }
  }
</style>
